var main = document.querySelector('main');

var count = 0;
var index = 0;
var xhr = new XMLHttpRequest();
xhr.open('get', './11-json.json');
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200 && xhr.status < 300 || xhr.status == 304) {
            var data = JSON.parse(xhr.responseText);
            // 大类
            data.forEach(function(value) {
                for (var key in value) {
                    main.innerHTML += `
                    <div class="variety">${key}</div>
                    `
                    var variety = document.querySelectorAll('.variety');
                    // 种类
                    value[key].forEach(function(v) {
                        for (var k in v) {
                            variety[count].innerHTML += `
                            <div class="kinds">${k}</div>
                            <div class="con">
                            </div>
                            `
                            var con = document.querySelectorAll('.con');
                            // 单个商品
                            v[k].forEach(function(vle) {
                                con[index].innerHTML += `
                                <section>
                                    <img src="${vle.goods_img}" alt="">
                                    <p class="title">${vle.title}</p>
                                    <div class="txt">
                                        <span class="price">¥${vle.price}</span>
                                        <span class="sale">已售${vle.sale}</span>
                                    </div>
                                </section>
                                `
                            })
                            index++;
                        }
                    })
                    count++;
                }
            })
        }
    }
}